<template>
  <div class="student-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1>欢迎回来，{{ userStore.userInfo?.name }}！</h1>
          <p>今天是 {{ formatDate(new Date()) }}，祝你学习愉快</p>
        </div>
        <div class="welcome-stats">
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalExams }}</div>
            <div class="stat-label">总考试数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.completedExams }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.averageScore }}</div>
            <div class="stat-label">平均分</div>
          </div>
        </div>
      </div>
      <div class="welcome-illustration">
        <i class="fas fa-graduation-cap"></i>
      </div>
    </div>
    
    <!-- 快速操作 -->
    <div class="quick-actions">
      <div class="action-card" @click="goToExams">
        <div class="action-icon">
          <i class="fas fa-clipboard-list"></i>
        </div>
        <div class="action-content">
          <h3>参加考试</h3>
          <p>查看可参加的考试</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
      
      <div class="action-card" @click="goToResults">
        <div class="action-icon">
          <i class="fas fa-chart-bar"></i>
        </div>
        <div class="action-content">
          <h3>考试记录</h3>
          <p>查看历史考试成绩</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
      
      <div class="action-card" @click="goToProfile">
        <div class="action-icon">
          <i class="fas fa-user-cog"></i>
        </div>
        <div class="action-content">
          <h3>个人设置</h3>
          <p>修改个人信息</p>
        </div>
        <div class="action-arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 进行中的考试 -->
      <div class="content-section">
        <div class="section-header">
          <h2>进行中的考试</h2>
          <el-button text @click="goToExams">
            查看全部 <i class="fas fa-arrow-right"></i>
          </el-button>
        </div>
        
        <div v-if="activeExams.length > 0" class="exam-cards">
          <div 
            v-for="exam in activeExams" 
            :key="exam.id" 
            class="exam-card active"
          >
            <div class="exam-header">
              <div class="exam-title">
                <h3>{{ exam.name }}</h3>
                <el-tag type="success" size="small">进行中</el-tag>
              </div>
              <div class="exam-time">
                <i class="fas fa-clock"></i>
                <span>{{ exam.duration }} 分钟</span>
              </div>
            </div>
            
            <div class="exam-content">
              <p class="exam-description">{{ exam.description }}</p>
              
              <div class="exam-meta">
                <div class="meta-item">
                  <i class="fas fa-list"></i>
                  <span>{{ exam.questionCount }} 题</span>
                </div>
                <div class="meta-item">
                  <i class="fas fa-star"></i>
                  <span>{{ exam.totalScore }} 分</span>
                </div>
                <div class="meta-item">
                  <i class="fas fa-calendar"></i>
                  <span>截止：{{ formatDateTime(exam.endTime) }}</span>
                </div>
              </div>
              
              <div class="exam-progress" v-if="exam.progress">
                <div class="progress-info">
                  <span>进度：{{ exam.progress.answered }} / {{ exam.questionCount }}</span>
                  <span class="percentage">{{ getProgressPercentage(exam) }}%</span>
                </div>
                <el-progress 
                  :percentage="getProgressPercentage(exam)"
                  :stroke-width="6"
                  :show-text="false"
                />
              </div>
            </div>
            
            <div class="exam-actions">
              <el-button 
                v-if="!exam.progress"
                type="primary" 
                @click="startExam(exam)"
              >
                开始考试
              </el-button>
              <el-button 
                v-else
                type="success" 
                @click="continueExam(exam)"
              >
                继续考试
              </el-button>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-state">
          <i class="fas fa-clipboard-list"></i>
          <h3>暂无进行中的考试</h3>
          <p>当前没有可参加的考试</p>
        </div>
      </div>
      
      <!-- 最近考试记录 -->
      <div class="content-section">
        <div class="section-header">
          <h2>最近考试记录</h2>
          <el-button text @click="goToResults">
            查看全部 <i class="fas fa-arrow-right"></i>
          </el-button>
        </div>
        
        <div v-if="recentResults.length > 0" class="results-list">
          <div 
            v-for="result in recentResults" 
            :key="result.id" 
            class="result-item"
          >
            <div class="result-info">
              <div class="result-title">
                <h4>{{ result.examName }}</h4>
                <el-tag 
                  :type="getScoreTagType(result.score, result.totalScore)"
                  size="small"
                >
                  {{ result.score }} / {{ result.totalScore }}
                </el-tag>
              </div>
              <div class="result-meta">
                <span class="submit-time">
                  <i class="fas fa-calendar"></i>
                  {{ formatDateTime(result.submitTime) }}
                </span>
                <span class="duration">
                  <i class="fas fa-clock"></i>
                  {{ formatDuration(result.duration) }}
                </span>
              </div>
            </div>
            
            <div class="result-score">
              <div class="score-circle" :class="getScoreLevel(result.score, result.totalScore)">
                <span class="score-text">{{ getScorePercentage(result.score, result.totalScore) }}%</span>
              </div>
            </div>
            
            <div class="result-actions">
              <el-button size="small" @click="viewResult(result)">
                查看详情
              </el-button>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-state">
          <i class="fas fa-chart-bar"></i>
          <h3>暂无考试记录</h3>
          <p>还没有参加过任何考试</p>
        </div>
      </div>
    </div>
    
    <!-- 成绩趋势图 -->
    <div class="chart-section">
      <div class="section-header">
        <h2>成绩趋势</h2>
        <el-select v-model="chartPeriod" size="small">
          <el-option label="最近7天" value="7d" />
          <el-option label="最近30天" value="30d" />
          <el-option label="最近3个月" value="3m" />
        </el-select>
      </div>
      
      <div class="chart-container">
        <div ref="chartRef" class="chart"></div>
      </div>
    </div>
    

  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import * as echarts from 'echarts'
import { getMyExamAssignments, getStudentExamRecords } from '@/api/exam'
import { getStudentExam } from '@/api/exam/exams'

const router = useRouter()
const userStore = useUserStore()
const chartRef = ref()
const chartPeriod = ref('30d')

const stats = ref({
  totalExams: 0,
  completedExams: 0,
  averageScore: 0
})

const activeExams = ref([])
const recentResults = ref([])

// 存储所有考试记录用于图表显示
const allExamRecords = ref([])

// 加载数据的方法
const loadDashboardData = async () => {
  try {
    // 加载活跃考试列表
    let examListResponse
    try {
      examListResponse = await getMyExamAssignments()
      
      if (examListResponse && examListResponse.code === 200) {
        const examData = Array.isArray(examListResponse.data) ? examListResponse.data : examListResponse.data?.list || []
        // 过滤和映射考试数据
        const mappedExams = examData
          .filter(assignment => assignment && (assignment.exam || assignment.examId)) // 确保有有效的考试数据
          .map(assignment => {
          const exam = assignment.exam || assignment
          // 由于后端为学生返回的exam对象不包含questions和totalScore字段（权限限制）
          // 我们需要使用合理的默认值或估算值
          const duration = exam.durationMinutes || assignment.duration || assignment.timeLimit || 60
          const estimatedQuestionCount = Math.max(1, Math.floor(duration / 3)) // 假设每题3分钟
          const estimatedTotalScore = estimatedQuestionCount * 10 // 假设每题10分
          
          // 检查考试是否过期
          const now = new Date()
          const endTime = new Date(assignment.endTime || exam.endTime)
          const isExpired = endTime < now
          
          // 根据过期状态调整状态
          let examStatus = assignment.status || 'PENDING'
          if (isExpired && (examStatus === 'PENDING' || examStatus === 'IN_PROGRESS')) {
            examStatus = 'EXPIRED'
          }
          
          return {
            id: assignment.assignmentId || assignment.id,
            examId: exam.examId || assignment.examId,
            name: exam.title || assignment.examTitle || assignment.title || assignment.name || `考试 ${exam.examId || assignment.examId || assignment.id}`,
            description: exam.description || assignment.description || '',
            status: mapExamStatus(examStatus),
            duration: duration,
            questionCount: assignment.questionCount || estimatedQuestionCount,
            totalScore: assignment.totalScore || estimatedTotalScore,
            startTime: assignment.startTime,
            endTime: assignment.endTime,
            examStartTime: exam.startTime,
            examEndTime: exam.endTime,
            assignmentId: assignment.assignmentId,
            progress: assignment.progress
          }
        })
        
        // 只显示进行中和可用的考试，并限制数量为3个
        activeExams.value = mappedExams
          .filter(exam => exam.status === 'available' || exam.status === 'in-progress')
          .slice(0, 3)
      } else {
        // 接口返回了响应但code不为0，可能是业务逻辑错误
        activeExams.value = []
      }
    } catch (examError) {
      console.error('getExamList API调用失败:', examError)
      console.error('错误详情:', {
        message: examError.message,
        response: examError.response,
        status: examError.response?.status,
        data: examError.response?.data
      })
      
      // 区分不同类型的错误
      if (examError.response?.status === 404) {
        // 404错误：接口不存在或数据不存在，这是正常情况
        console.info('暂无考试数据')
        activeExams.value = []
      } else if (examError.response?.status >= 500) {
        // 服务器错误：真正的系统问题
        console.error('获取考试列表失败:', examError)
        ElMessage.error('获取考试列表失败，请稍后重试')
        activeExams.value = []
      } else {
        // 其他错误（网络问题等）
        console.warn('获取考试列表失败:', examError)
        activeExams.value = []
      }
    }
    
    // 加载考试记录
    let recordsResponse
    try {
      recordsResponse = await getStudentExamRecords({
        page: 1,
        size: 20
      })
      
      if (recordsResponse && recordsResponse.code === 200) {
        const sessions = Array.isArray(recordsResponse.data) ? recordsResponse.data : recordsResponse.data?.list || []
        
        // 转换会话数据为记录数据格式
        const records = await Promise.all(sessions.map(async session => {
          // 获取考试名称，根据examId调用接口获取正确的考试标题
          let examName = `考试 ${session.examId || session.exam_id || session.id}`
          if (session.examId || session.exam_id) {
            try {
              const examResponse = await getStudentExam(session.examId || session.exam_id)
              if (examResponse && examResponse.code === 200 && examResponse.data) {
                examName = examResponse.data.title || examName
              }
            } catch (examError) {
              console.warn('获取考试详情失败:', examError)
              // 使用备用名称
              examName = session.exam?.title || session.examTitle || session.exam_title || session.title || examName
            }
          }
          
          return {
            id: session.session_id || session.sessionId,
            examName: examName,
            subject: session.subject || '综合考试',
            score: session.score || 0,
            totalScore: session.total_score || session.totalScore || 100,
            status: mapSessionStatus(session.status),
            submitTime: session.end_time || session.endTime || session.submitTime,
            duration: calculateDuration(session.start_time || session.startTime, session.end_time || session.endTime),
            correctAnswers: session.correct_answers || session.correctAnswers || 0,
            totalQuestions: session.total_questions || session.totalQuestions || 0
          }
        }))
        
        allExamRecords.value = records
        recentResults.value = records.slice(0, 3)
        
        // 计算统计数据
        const completedRecords = records.filter(r => r.status === 'completed')
        stats.value = {
          totalExams: records.length,
          completedExams: completedRecords.length,
          averageScore: completedRecords.length > 0 
            ? Math.round(completedRecords.reduce((sum, r) => sum + (r.score / r.totalScore * 100), 0) / completedRecords.length)
            : 0
        }
      } else {
        // 设置默认值
        allExamRecords.value = []
        recentResults.value = []
        stats.value = { totalExams: 0, completedExams: 0, averageScore: 0 }
      }
    } catch (recordError) {
      // 区分不同类型的错误
      if (recordError.response?.status === 404) {
        // 404错误：没有考试记录，这是正常情况
        console.info('暂无考试记录')
        allExamRecords.value = []
        recentResults.value = []
        stats.value = { totalExams: 0, completedExams: 0, averageScore: 0 }
      } else if (recordError.response?.status >= 500) {
        // 服务器错误：真正的系统问题
        console.error('获取考试记录失败:', recordError)
        ElMessage.error('获取考试记录失败，请稍后重试')
        allExamRecords.value = []
        recentResults.value = []
        stats.value = { totalExams: 0, completedExams: 0, averageScore: 0 }
      } else {
        // 其他错误（网络问题等）
        console.warn('获取考试记录失败:', recordError)
        allExamRecords.value = []
        recentResults.value = []
        stats.value = { totalExams: 0, completedExams: 0, averageScore: 0 }
      }
    }
    
    // 初始化图表
    await nextTick()
    initChart()
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
    ElMessage.error('加载数据失败，请刷新页面重试')
  }
}

// 映射后端状态到前端状态
const mapExamStatus = (backendStatus) => {
  const statusMap = {
    'PENDING': 'available',
    'IN_PROGRESS': 'in-progress', 
    'COMPLETED': 'completed',
    'EXPIRED': 'missed',
    'CANCELLED': 'missed'
  }
  return statusMap[backendStatus] || 'available'
}

// 映射会话状态到记录状态
const mapSessionStatus = (sessionStatus) => {
  const statusMap = {
    'COMPLETED': 'completed',
    'IN_PROGRESS': 'in-progress',
    'SUBMITTED': 'completed',
    'TIMEOUT': 'completed'
  }
  return statusMap[sessionStatus] || 'completed'
}

// 计算考试时长（秒）
const calculateDuration = (startTime, endTime) => {
  if (!startTime || !endTime) return 0
  const start = new Date(startTime)
  const end = new Date(endTime)
  return Math.floor((end - start) / 1000)
}

const formatDate = (date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

const formatDateTime = (dateTime) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

const formatDuration = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  }
  return `${minutes}分钟`
}

const getProgressPercentage = (exam) => {
  if (!exam.progress) return 0
  return Math.round((exam.progress.answered / exam.questionCount) * 100)
}

const getScorePercentage = (score, totalScore) => {
  return Math.round((score / totalScore) * 100)
}

const getScoreTagType = (score, totalScore) => {
  const percentage = (score / totalScore) * 100
  if (percentage >= 90) return 'success'
  if (percentage >= 80) return 'primary'
  if (percentage >= 70) return 'warning'
  return 'danger'
}

const getScoreLevel = (score, totalScore) => {
  const percentage = (score / totalScore) * 100
  if (percentage >= 90) return 'excellent'
  if (percentage >= 80) return 'good'
  if (percentage >= 70) return 'average'
  return 'poor'
}



const goToExams = () => {
  router.push('/student/exams')
}

const goToResults = () => {
  router.push('/student/records')
}

const goToProfile = () => {
  router.push('/student/profile')
}

const startExam = (exam) => {
  router.push(`/student/exam/${exam.id}`)
}

const continueExam = (exam) => {
  router.push(`/student/exam/${exam.id}`)
}

const viewResult = (result) => {
  router.push(`/student/result/${result.id}`)
}

const initChart = () => {
  if (!chartRef.value) return
  
  const chart = echarts.init(chartRef.value)
  
  // 从考试记录中生成图表数据
  const generateChartData = () => {
    if (!allExamRecords.value || allExamRecords.value.length === 0) {
      return {
        dates: ['暂无数据'],
        scores: [0]
      }
    }
    
    // 按时间排序并取最近的记录
    const sortedResults = [...allExamRecords.value]
      .filter(r => r.status === 'completed' && r.score !== undefined) // 只显示已完成且有分数的记录
      .sort((a, b) => new Date(a.submitTime) - new Date(b.submitTime))
      .slice(-7) // 最多显示7个数据点
    
    if (sortedResults.length === 0) {
      return {
        dates: ['暂无数据'],
        scores: [0]
      }
    }
    
    const dates = sortedResults.map(result => {
      const date = new Date(result.submitTime)
      return `${date.getMonth() + 1}-${date.getDate()}`
    })
    
    const scores = sortedResults.map(result => 
      Math.round((result.score / result.totalScore) * 100)
    )
    
    return { dates, scores }
  }
  
  const { dates, scores } = generateChartData()
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function(params) {
        if (params[0] && params[0].value > 0) {
          return `考试成绩: ${params[0].value}%`
        }
        return '暂无数据'
      }
    },
    legend: {
      data: ['考试成绩']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100
    },
    series: [
      {
        name: '考试成绩',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          color: '#3b82f6'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(59, 130, 246, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(59, 130, 246, 0.05)'
              }
            ]
          }
        },
        data: scores
      }
    ]
  }
  
  chart.setOption(option)
  
  // 响应式
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

onMounted(() => {
  loadDashboardData()
  nextTick(() => {
    initChart()
  })
})
</script>

<style lang="scss" scoped>
.student-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.welcome-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 32px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .welcome-content {
    flex: 1;
    
    .welcome-text {
      margin-bottom: 32px;
      
      h1 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      
      p {
        font-size: 16px;
        opacity: 0.9;
      }
    }
    
    .welcome-stats {
      display: flex;
      gap: 40px;
      
      .stat-item {
        text-align: center;
        
        .stat-number {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
  }
  
  .welcome-illustration {
    font-size: 120px;
    opacity: 0.3;
    margin-left: 40px;
  }
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
  
  .action-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    
    i {
      font-size: 20px;
      color: white;
    }
  }
  
  .action-content {
    flex: 1;
    
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--neutral-700);
      margin-bottom: 4px;
    }
    
    p {
      font-size: 14px;
      color: var(--neutral-500);
    }
  }
  
  .action-arrow {
    color: var(--neutral-400);
  }
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.content-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-700);
  }
}

.exam-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exam-card {
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &.active {
    border-left: 4px solid #10b981;
  }
  
  .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    
    .exam-title {
      h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--neutral-700);
        margin-bottom: 6px;
      }
    }
    
    .exam-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      color: var(--neutral-500);
    }
  }
  
  .exam-content {
    margin-bottom: 16px;
    
    .exam-description {
      font-size: 14px;
      color: var(--neutral-600);
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .exam-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 12px;
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--neutral-500);
        
        i {
          color: var(--neutral-400);
        }
      }
    }
    
    .exam-progress {
      .progress-info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--neutral-600);
        margin-bottom: 6px;
        
        .percentage {
          font-weight: 600;
          color: var(--primary-color);
        }
      }
    }
  }
  
  .exam-actions {
    display: flex;
    justify-content: flex-end;
  }
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    background: var(--neutral-50);
  }
  
  .result-info {
    flex: 1;
    
    .result-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      
      h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--neutral-700);
      }
    }
    
    .result-meta {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: var(--neutral-500);
      
      span {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }
  
  .result-score {
    .score-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: white;
      
      &.excellent {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      }
      
      &.good {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      }
      
      &.average {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      }
      
      &.poor {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      }
    }
  }
}

.chart-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 32px;
  
  .chart-container {
    .chart {
      width: 100%;
      height: 300px;
    }
  }
}



.empty-state {
  text-align: center;
  padding: 40px 20px;
  
  i {
    font-size: 48px;
    color: var(--neutral-300);
    margin-bottom: 16px;
  }
  
  h3 {
    font-size: 16px;
    color: var(--neutral-500);
    margin-bottom: 8px;
  }
  
  p {
    color: var(--neutral-400);
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .student-dashboard {
    padding: 0 16px;
  }
  
  .welcome-section {
    flex-direction: column;
    text-align: center;
    
    .welcome-content {
      .welcome-stats {
        justify-content: center;
        gap: 24px;
      }
    }
    
    .welcome-illustration {
      margin: 20px 0 0 0;
      font-size: 80px;
    }
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .action-card {
    .action-content {
      h3 {
        font-size: 15px;
      }
      
      p {
        font-size: 13px;
      }
    }
  }
  
  .exam-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .result-item {
    flex-direction: column;
    align-items: stretch;
    
    .result-score {
      align-self: center;
    }
  }
}
</style>